<template>
	<div class="app-container">
		<!--工具栏-->
		<div class="head-container">
			<div v-if="crud.props.searchToggle">
				<el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item"
					@keyup.enter.native="crud.toQuery" />
				<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
					<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name"
						:value="item.key" />
				</el-select>
				<rrOperation :crud="crud" />
			</div>
			<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
			<crudOperation :permission="permission" />
			<!--表单组件-->
			<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
				:title="crud.status.title" width="60%">
				<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
					<el-form-item label="名称" prop="vrecoveryName">
						<el-input v-model="form.vrecoveryName" style="width: 350px;" />
					</el-form-item>
					<el-form-item label="替换类型">
						<el-select v-model="form.replaceType" filterable placeholder="请选择" style="width: 350px;">
							<el-option v-for="item in replaceType" :key="item.label" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="颜色类型">
						<el-select v-model="form.rcolourType" filterable placeholder="请选择" style="width: 350px;">
							<el-option v-for="item in rcolourType" :key="item.label" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="全品分类">
						<el-select v-model="form.recoveryOfferId" filterable placeholder="请选择" style="width: 350px;">
							<el-option v-for="item in offerList" :key="item.id" :label="item.vrecoveryName"
								:value="item.id"/>
						</el-select>
					</el-form-item>
					<el-form-item label="R">
						<el-input v-model="form.red" style="width: 206px;" />
					</el-form-item>
					<el-form-item label="G">
						<el-input v-model="form.green" style="width: 206px;" />
					</el-form-item>
					<el-form-item label="B">
						<el-input v-model="form.blue" style="width: 206px;" />
					</el-form-item>
					<el-form-item label="替R" v-if="form.rcolourType === '' || form.rcolourType === 1">
						<el-input v-model="form.replaceRed" style="width: 206px;" />
					</el-form-item>
					<el-form-item label="替G" v-if="form.rcolourType === '' || form.rcolourType === 1">
						<el-input v-model="form.replaceGreen" style="width: 206px;" />
					</el-form-item>
					<el-form-item label="替B" v-if="form.rcolourType === '' || form.rcolourType === 1">
						<el-input v-model="form.replaceBlue" style="width: 206px;" />
					</el-form-item>
					<el-form-item label="状态" prop="status" style="width: 100%;">
						<el-radio-group v-model="form.status" style="width: 100%;">
							<el-radio :label="1">正常</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="crud.cancelCU">取消</el-button>
					<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
				</div>
			</el-dialog>
			<!--表格渲染-->
			<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
				@selection-change="crud.selectionChangeHandler">
				<el-table-column type="selection" width="55" />
				<el-table-column v-if="columns.visible('vrecoveryName')"  prop="vrecoveryName" label="名称" show-overflow-tooltip />
				<el-table-column v-if="columns.visible('replaceType')" prop="replaceType" label="替换类型" width="100">
					<template slot-scope="scope">
						{{ scope.row.replaceType === 0 ? 'KG' : '' }}
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('rcolourType')" prop="rcolourType" label="颜色类型" width="100">
					<template slot-scope="scope">
						{{ scope.row.rcolourType === 1 ? '替换背景色' : '水印底色' }}
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('red')" prop="red" label="红色(R)" width="80"/>
				<el-table-column v-if="columns.visible('green')" prop="green" label="绿色(G)" width="80"/>
				<el-table-column v-if="columns.visible('blue')" prop="blue" label="蓝色(B)" width="80"/>
				<el-table-column v-if="columns.visible('replaceRed')" prop="replaceRed" label="替换红色(R)" width="120"/>
				<el-table-column v-if="columns.visible('replaceGreen')" prop="replaceGreen" label="替换绿色(G)" width="120"/>
				<el-table-column v-if="columns.visible('replaceBlue')" prop="replaceBlue" label="替换蓝色(B)" width="120"/>
				<el-table-column v-if="columns.visible('status')" prop="status" label="状态" width="80">
					<template slot-scope="scope">
						{{ scope.row.status === 1 ? '正常' : '禁用' }}
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="添加时间" width="110" show-overflow-tooltip>
					<template slot-scope="scope">
						{{ parseTime(scope.row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column
					v-permission="['admin','syReplaceWatermarkColourSet:edit','syReplaceWatermarkColourSet:del']"
					label="操作" width="150px" align="center">
					<template slot-scope="scope">
						<udOperation :data="scope.row" :permission="permission" />
					</template>
				</el-table-column>
			</el-table>
			<!--分页组件-->
			<pagination />
		</div>
	</div>
</template>

<script>
	import crudSyReplaceWatermarkColourSet from '@/api/syReplaceWatermarkColourSet'
	import {getOfferList} from '@/api/syReplaceWatermarkColourSet'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'
	import MaterialList from "@/components/material";

	// crud交由presenter持有
	const defaultCrud = CRUD({
		title: '',
		url: 'api/syReplaceWatermarkColourSet',
		sort: 'rcolour_type,asc',
		crudMethod: {
			...crudSyReplaceWatermarkColourSet
		}
	})
	const defaultForm = {
		id: null,
		vrecoveryName: null,
		replaceType: null,
		rcolourType: '',
		red: null,
		green: null,
		blue: null,
		replaceRed: null,
		replaceGreen: null,
		replaceBlue: null,
		status: 1,
		createTime: null,
		updateTime: null,
		recoveryOfferId: null
	}
	export default {
		name: 'SyReplaceWatermarkColourSet',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation,
			MaterialList
		},
		mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
		dicts: ['is_enable'],
		data() {
			return {
				permission: {
					add: ['admin', 'syReplaceWatermarkColourSet:add'],
					edit: ['admin', 'syReplaceWatermarkColourSet:edit'],
					del: ['admin', 'syReplaceWatermarkColourSet:del']
				},
				rules: {
					vrecoveryName: [{
						required: true,
						message: '名称不能为空',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '状态（1：正常 0：禁用）不能为空',
						trigger: 'blur'
					}],
					createTime: [{
						required: true,
						message: '添加时间不能为空',
						trigger: 'blur'
					}]
				},
				queryTypeOptions: [{
						key: 'vrecoveryName',
						display_name: '名称'
					},
					{
						key: 'replaceType',
						display_name: '替换类型(0：KG；)'
					},
					{
						key: 'rcolourType',
						display_name: '颜色类型(0：水印底色；1：替换背景色)'
					},
					{
						key: 'status',
						display_name: '状态（1：正常 0：禁用）'
					}
				],
				rcolourType: [{
						value: 0,
						label: '水印底色'
					},
					{
						value: 1,
						label: '替换背景色'
					},
				],
				replaceType: [{
					value: 0,
					label: '0-KG'
				}],
				offerList: []
			}
		},
		created() {
			this.getList()
		},
		methods: {
			// 获取数据前设置好接口地址
			[CRUD.HOOK.beforeRefresh]() {
				const query = this.query
				if (query.type && query.value) {
					this.crud.params[query.type] = query.value
				} else {
					delete this.crud.params.vrecoveryName
					delete this.crud.params.replaceType
					delete this.crud.params.rcolourType
					delete this.crud.params.status
				}
				return true
			}, // 新增与编辑前做的操作
			[CRUD.HOOK.afterToCU](crud, form) {
			},
			getList() {
				try {
					setTimeout(() => {
						getOfferList().then((res) => {
							this.offerList = res.offerList
							this.$notify({
								title: '刷新成功',
								type: 'success',
								duration: 2500
							})
						}).catch(err => {
							console.log(err.response.data.message)
						})
					}, 100)
				} catch (exception) {
					this.$message.error('刷新失败！')
				} finally {
					
				}
			},
		}
	}
</script>

<style scoped>
	.table-img {
		display: inline-block;
		text-align: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		vertical-align: middle;
		width: 32px;
		height: 32px;
		line-height: 32px;
	}

	.el-form-item {
		display: inline-block;
	}
</style>